<template>
  <div class="container">
    <div class="headerBox">
      <h5>基本资料</h5>
      <h5 class="f-c" style="margin-left: 30px" @click="toDetailesInfo">
        详细资料
      </h5>
      <h5 class="f-c" style="margin-left: 30px" @click="toAttachment">
        相关附件
      </h5>
    </div>
    <div class="formContainer">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
        :rules="rules"
        ref="formLabelAlign"
      >
        <el-form-item label="姓名">
          <el-input v-model="formLabelAlign.tName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="formLabelAlign.tSex" label="男">男</el-radio>
          <el-radio v-model="formLabelAlign.tSex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formLabelAlign.tAge"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="tStudy">
          <el-select
            v-model="formLabelAlign.tStudy"
            placeholder="请选择"
            @change="changeEducation"
          >
            <el-option
              v-for="item in educations"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="tFirstDate">
          <el-col :span="11">
            <el-input v-model="formLabelAlign.tFirstDate"></el-input>
<!--            <el-form-item prop="tFirstDate">-->
<!--              <el-date-picker-->
<!--                v-model="formLabelAlign.tFirstDate"-->
<!--                style="width: 218px"-->
<!--                type="date"-->
<!--                placeholder="选择日期"-->
<!--                format="yyyy年MM月dd日"-->
<!--                value-format="yyyy/MM/dd"-->
<!--                @change="changeBornDate"-->
<!--              >-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="tPhone">
          <el-input v-model="formLabelAlign.tPhone"></el-input>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="formLabelAlign.tHeight"></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="formLabelAlign.tNation"></el-input>
        </el-form-item>
        <el-form-item label="籍贯" prop="tNP">
          <el-input
            v-model="formLabelAlign.tNP"
            placeholder="请输入籍贯"
          ></el-input>
        </el-form-item>
        <el-form-item label="应聘岗位" prop="tJob">
          <el-select
            v-model="formLabelAlign.tJob"
            placeholder="请选择"
            @change="changeJob"
          >
            <el-option
              v-for="item in jobs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期望月薪" prop="tSalary">
          <el-input
            type="number"
            v-model="formLabelAlign.tSalary"
            placeholder="不限"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="tEmail">
          <el-input
            type="email"
            v-model="formLabelAlign.tEmail"
            placeholder="以@为分隔符,如547085696@qq.com"
          ></el-input>
        </el-form-item>
        <el-form-item style="border-top: 1px dashed #eee">
          <div style="margin-top: 20px">
            <el-button
              class="btn-save"
              @click="submitResumeInfo('formLabelAlign', formLabelAlign)"
              >保存</el-button
            >
            <span
              style="font-weight: 600; color: #1270ae; cursor: pointer"
              @click="nextInfo"
              >下一步</span
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "ResumeInfo",
  data() {
    //检验手机号
    let validateTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        let reg = /^1[3456789]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error("请输入11位正确的手机号"));
        }
        callback();
      }
    };
    //检验邮箱
    let checkEmail = (rule, value, callback) => {
      const mailReg =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    return {
      loginUserInfo: {},
      formLabelAlign: {},
      labelPosition: "right",
      rules: {
        tNP: [
          { required: true, message: "请输入籍贯", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        tPhone: [{ validator: validateTel, trigger: "blur" }],
        tEmail: [{ validator: checkEmail, trigger: "blur" }],
        tStudy: [{ required: true, message: "请选择学历", trigger: "change" }],
        tFirstDate: [
          { required: true, message: "请填写日期", trigger: "change" },
        ],
        tJob: [{ required: true, message: "请选择岗位", trigger: "change" }],
        tSalary: [
          { required: true, message: "请输入期望薪资,不限", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState("resume", ["jobs", "dateType", "educations"]),
  },
  methods: {
    ...mapActions("resume", ["updateRequestInfo"]),
    ...mapMutations("resume", ["next"]),
    //拿到登陆人员最新信息
    async getNewInfo() {
      let nid = this.loginUserInfo.tId;
      await this.$axios
        .get(`/talents/showLoginAndPasswrod/${nid}`)
        .then((res) => {
          this.formLabelAlign = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变学历select获取值
    changeEducation(val) {
      this.formLabelAlign.tStudy = val;
    },
    //改变出生日期获取值
    // changeBornDate(val) {
    //   this.formLabelAlign.tFirstDate = val;
    // },
    //获取岗位
    changeJob(val) {
      this.formLabelAlign.tJob = val;
    },
    //提交表单验证
    submitResumeInfo(formLabelAlign, obj) {
      this.$refs[formLabelAlign].validate((valid) => {
        if (valid) {
          this.updateRequestInfo(obj);
        } else {
          return false;
        }
      });
    },
    //跳下一个路由页面
    nextInfo() {
      this.getNewInfo();
      this.next("detail");
    },
    //to
    toDetailesInfo() {
      this.getNewInfo();
      this.next("detail");
    },
    toAttachment() {
      this.getNewInfo();
      this.next("attachment");
    },
  },
  created() {
    this.loginUserInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
  mounted() {
    this.getNewInfo();
  }
};
</script>

<style scoped>
.container {
  width: 98%;
  height: 900px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.headerBox {
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #cfd1d2;
  cursor: pointer;
}

.formContainer {
  width: 56%;
  margin: 15px 0 0 30px;
}

.f-c {
  color: #999;
}

.btn-save {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #fff;
  margin-right: 20px;
}

.btn-save:hover {
  background-color: rgba(22, 154, 127, 0.9);
}
</style>